<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.定义myAxios函数，解释配置对象，返回promise对象
        function myAxios(config){
            return new promise((reslove,reject)=>{
                // 2.发起XHR请求
                const xhr = new XMLHttpRequest()
                //查询参数
                if(config.params){
                    const paramsObj = new URLSearchParams(config.params)
                    const queruString = paramsObj.toString()
                    config.url += `?${queruString}`
                }
                xhr.open(config.messagr || 'GET',config.url)
                xhr.addEventListener('loadend',()=>{
                    // 3.调用成功/失败的处理程序
                    if(xhr.status>=200&&xhr.status<300){
                        reslove(JSON.parse(xhr.response))
                    }else{
                        reject(new Error(xhr.response))
                    }
                })
                //请求体数据
                if(config.data){
                     const jsonStr = JSON.stringify(config.data)
                     xhr1.setRequestHeader('Content-Type','application/json')
                    xhr.send()
                }else{
                xhr.send()
                }
            })
        }
        // 4.使用myAxios函数
        myAxios({
            url:'http://hmajax.itheima.net/api/area',
            methods:'',
            params:{
                
            },
            data:{

            }
        }).then(result=>{
            console.log(result)
        }).catch(error=>{
            console.log(error)
        })
    </script>
</body>
</html>